<template lang="pug">
  .page-body-content 
    .wrapper(v-swiper:mySwiper="swiperOption", :class='{"mobile": $store.state.view.isMobile}')
      .swiper-pagination
      .swiper-wrapper
        nuxt-link.swiper-slide(to='/', tag='div')
          .img
            img(src='https://qn.yaavi.me/image/jpg/WechatIMG3.jpeg')
          .title 原来你是这样的苏州
        nuxt-link.swiper-slide(to='/to', tag='div', v-for="item, i in 3", :key="i")
          .img
            img(src='https://qn.yaavi.me/image/jpg/WechatIMG2.jpeg')
          .title 中华民族的伟大复兴 靠我们了️🌞
    .tabs
      .i.active 全部
      .i 视频
      .i 图片

    .list(:class='{"mobile":isMobile}')
      .item(v-for="(item, index) in list", :key="index")
        .img
          img(src='https://qn.yaavi.me/image/jpg/WechatIMG2.jpeg-256.144')
        .title 快乐成长，有机会更好
        .info 20分钟前
        .bottom
          svg.icon(aria-hidden="true")
            use(xlink:href="#icon-eye")
          span 236
          svg.icon(aria-hidden="true")
            use(xlink:href="#icon-pinglun")
          span 22
          svg.icon(aria-hidden="true")
            use(xlink:href="#icon-heart")
          span 52

      .item.default(v-for="(item, index) in itememptylist", :key="index + '1'", v-if="itememptylist") {{item}}

    .loadmore 没有更多了
</template>

<script>
export default {
  data () {
    return {
      swiperOption: {
        // effect: 'fade',
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        speed: 500,
        pagination: {
          el: '.swiper-pagination'
        }
      },

      list: [1,2,3,4]
    }
  },
  computed: {
    isMobile () {
      return this.$store.state.view.isMobile
    },
    itememptylist () {
      let length = 0
      let arr = []

      if (this.isMobile) {
        return arr
      }
      if (this.list.length !== 0) {
        length = 3 - (this.list.length % 3)
      }
      for (let i = 0; i < length; i++) {
        arr.push(i)
      }
      return arr
    }
  },
  methods: {
  },
  created () {
    for (let i = 0; i < this.columns; i++) {
      // this.list.push(['test'])
    }
  }
}
</script>

<style lang="stylus" scoped>
.list
  display flex
  flex-flow row wrap
  justify-content space-between
  &.mobile
    .item
      flex 0 0 100%
      width 100%

  .item
    background $White
    border-radius .05rem
    margin-bottom .15rem
    flex 0 0 32%
    width 32%
    overflow hidden
    transition all .3s ease

    &:hover
      box-shadow 0 0 .1rem rgba(0,0,0,0.1)
    &.default
      opacity 0
    .img
      width 100%
      cursor pointer
      transition opacity .2s
      &:hover
        opacity .9
      img
        width 100%
    .title
      padding .08rem .1rem .04rem
      font-size .14rem
      cursor pointer
      &:hover
        opacity .9
    .info
      color $elBlack
      padding 0 .1rem

    .bottom
      height .2rem
      line-height .2rem
      display flex
      flex-flow row nowrap
      align-items center
      padding .1rem
      .icon
        opacity .6
        width .16rem
        height .16rem
      span
        margin 0 .14rem 0 .03rem
        transition color .3s ease
        color $elBlack
.tabs
  display flex
  align-items center
  justify-content center
  padding .15rem 0
  .i
    display inline-block
    padding .05rem .12rem
    cursor pointer
    font-size .14rem
    color $elBlack
    transition color .2s
    &.active, &:hover
      color $Black

.wrapper
  max-width $bodyWidth - .4rem
  height 3.6rem
  margin 0 auto
  border-radius .05rem
  // background $White
  position relative
  z-index 3
  cursor pointer
  overflow hidden
  &.mobile
    width 3.75rem
    height 1.6rem
  .swiper-pagination
    max-width 2rem
    right .1rem
    left auto
    text-align right 
  .swiper-slide
    height 100%
    background $elBlack
    // &.swiper-slide-active
    position relative
    .img
      width 100%
      height 100%
      img
        max-width 100%
        position relative
        top 50%
        transform translateY(-50%)
    .title
      width 100%
      height .34rem
      position absolute
      left 0
      bottom 0
      box-sizing border-box
      padding 0 .15rem
      line-height .34rem
      font-size .13rem
      color $elSilver
      background rgba(0,0,0,0.35)
      
</style>
